<template>
  <div class="wrap">
    <div class="items" v-for="(item,index) in recomList" :key="index">
      <div class="img" @click="toDetail(item.id)">
        <img :src="item.imgUrl" alt>
      </div>
      <p>{{item.title}}</p>
      <h4>￥:{{item.pic}}</h4>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
export default {
  props: {},
  components: {},
  data() {
    return {};
  },
  computed: {
    ...mapState(["recomList"])
  },
  methods: {
    ...mapActions(["getRecomListFn"]),
    toDetail(id) {
      this.$router.push(`/detail/${id}`)
    }
  },
  created() {},
  mounted() {
    this.getRecomListFn();
  }
};
</script>
<style scoped lang="">
.wrap {
  width: 100%;
  overflow: scroll;
  display: flex;
  flex-wrap: wrap;
}
.items {
  width: 45%;
  height: 240px;
  margin: 10px auto;
}
.img {
  width: 100%;
  height: 160px;
}
.img img {
  width: 100%;
  height: 100%;
}
p {
  width: 100%;
  height: 30px;
  margin-top: 10px;
  font-size: 14px;
  overflow: hidden;
}
h4 {
  width: 100%;
  height: 20px;
  color: red;
  margin-top: 10px;
}
</style>
